<ng-container *ngFor="let item of listData">
  <div class="item-bg">
    <!-- header -->
    <div class="item-header" *ngIf="item.headRowLeft">
      <img class="item-avatar" src="{{item.headRowLeft.icon?.iconName}}" alt="" onerror="onerror=null;src='assets/img/headtrait.png'">
      <p class="header-content">{{item.headRowLeft.firstText?.label}}</p>
      <span class="header-status" [ngStyle]="item.headRowRight.firstText?.cssStyle | styleFilter">{{item.headRowRight.firstText?.label}}</span>
    </div>

    <div style="padding-top: 0.94rem; padding-bottom: 0.94rem;">
      <p class="item-content-title" *ngIf="item.secondRowLeft?.title">
        <span class="item-content-text" >{{item.secondRowLeft.title}}</span>
        <span class="phone" appDebounceClick (debounceClick)="call(item.secondRowLeft?.phone?.label)">{{item.secondRowLeft.phone.label}}</span>
        <img *ngIf="item.secondRowLeft?.phone?.icon" style="width: 0.88rem; height: 0.88rem; object-fit: contain; display: inline-block; margin-left: 0.31rem;" src="assets/icon/{{item.secondRowLeft?.phone.icon}}" alt="">
      </p>

      <p class="item-content-sub-title">
        <span class="title-status" [ngStyle]="item.thirdRowLeft?.firstText?.cssStyle | styleFilter">{{item.thirdRowLeft?.firstText?.label}}</span>

        <span class="item-content-sub-text" *ngIf="item.thirdRowLeft?.secondText?.label" appDebounceClick (debounceClick)="detailPage(item.thirdRowLeft.secondText?.link)">{{item.thirdRowLeft?.secondText?.label}}</span>

        <img *ngIf="item.thirdRowLeft?.icon" style="width: 0.38rem; height: 0.69rem; object-fit: contain; display: inline-block; margin-left: 0.31rem;" src="assets/icon/{{item.thirdRowLeft.icon}}" alt="">

      </p>
      <p *ngIf="item.fourthRowLeft?.firstText?.label" [ngStyle]="item.fourthRowLeft?.firstText?.cssStyle | styleFilter" class="item-content-detail">{{item.fourthRowLeft?.firstText?.label}}</p>
    </div>



    <!-- line -->
    <hr *ngIf="item.inlineBlock" class="line">

    <div class="record-bg">
      <span [ngStyle]="item.fifthRowLeft?.firstText?.cssStyle | styleFilter" class="record-status">{{item.fifthRowLeft?.firstText?.label}}</span>
      <div class="action-icon-bg" *ngIf="item.fifthRowRight?.iconList && item.fifthRowRight?.iconList.length > 0">
        <ng-container *ngFor="let iconItem of item.fifthRowRight.iconList, let i = index" >
        <!-- 最多4个 -->
          <ng-container *ngIf="item.fifthRowRight.iconList.length <= 4">
            <img class="icon"  appDebounceClick (debounceClick)="iconClick(iconItem)" src="assets/icon/{{iconItem.iconName}}" alt="">

          </ng-container>
          
          <!-- 多于4个 -->
          <ng-container *ngIf="item.fifthRowRight.iconList.length > 4" >
            <!-- 前3 -->
            <ng-container *ngIf="i < 3">
              <img class="icon"  appDebounceClick (debounceClick)="iconClick(iconItem)" src="assets/icon/{{iconItem.iconName}}" alt="">
  
            </ng-container>
            <!-- more -->
            <ng-container *ngIf="i === 3">
              <img class="icon"  appDebounceClick (debounceClick)="openIcon(item.fifthRowRight.iconList)" src="assets/img/List operation_icon_more@3x.png" alt="">
            </ng-container>
            
          </ng-container>
          

        </ng-container>

      </div>

    </div>
    <!-- remakr -->
    <img *ngIf="item.remark?.length > 0" style="width:0.56rem;height:0.38rem;margin-left:1.25rem;" src="assets/icon/detail_icon_triangle@3x.png">
    <p *ngIf="item.remark?.length > 0" class="remark">{{item.remark}}</p>

  </div>

</ng-container>

<ion-infinite-scroll *ngIf="tagData.data.submit && tagData.pageTotal &&  (pageNo < pageTotal) " threshold="5%" (ionInfinite)="loadMoreData($event)">
  <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>